// 引入必要文件
import OlMap from "ol/Map";
import Overlay from "ol/Overlay";
import Animation from "./animation";

/** 鼠标事件管理器 */

export default class MouseEvent {
    private overlay: Overlay;
    private overlayView: Function;
    private map: OlMap;
    private isPc: boolean;
    private animation: Animation;
    constructor(map: OlMap, EventHandleCallBack: Function, isPc: boolean = true) {
        this.map = map;
        this.isPc = isPc;
        this.overlayView = EventHandleCallBack;
        this.animation = new Animation(this.map);
        // 将绑定的函数保存为类的属性
        this.handleMarkerClick = this.handleMarkerClick.bind(this);
        this.createSingleClick();
        // 创建Overlayer 用于显示查询结果
        this.overlay = new Overlay({
            element: document.createElement("div"),
            positioning: "bottom-center",
            offset:[0, -50]
        });

        this.map.addOverlay(this.overlay);
    }

    /** 创建鼠标单击事件 */
    createSingleClick() {
        this.map.on("singleclick", this.handleMarkerClick);
    }

    /** 处理单击事件 */
    handleMarkerClick(event: any) {
        try {
            const map = event.map;
            const features = map.getFeaturesAtPixel(event.pixel);
            if (features.length > 0) {
                const feature = features[0];
                const properties = feature.getProperties();
                const position = event.coordinate;
                // 聚焦至目标点
                this.animation.jumpToLocation(position, 500);
                // 显示查询结果
                this.showOverlay(properties, position);
            } else {
                this.closeOverlay();
            }
        } catch (error) {
            this.closeOverlay();
        }
    }

    private showOverlay(options: any, position) {
        this.overlay.getElement()!.innerHTML = `
         <div class="homeworkBox">
    <div class="homeworkInformation">
      <div class="left">
        <div class="td">
          <div>作业点名称：</div>
          <div>${options.properties.name}</div>
        </div>
        <div class="td">
          <div>联系人：</div>
          <div>${options.properties.data.personName}</div>
        </div>
        <div class="td">
          <div>海报高度(M)</div>
          <div>${options.properties.data.gd||'-'}</div>
        </div>
        <div class="td">
          <div>所属地级：</div>
          <div>${options.properties.data.dj||'-'}</div>
        </div>
        <div class="td">
          <div>所属村镇：</div>
          <div>${options.properties.data.cz||'-'}</div>
        </div>
      </div>
      <div class="right">
        <div class="td">
          <div>作业点编号：</div>
          <div>${options.properties.data.code||'-'}</div>
        </div>
        <div class="td">
          <div>联系电话：</div>
          <div>${options.properties.data.phone||'-'}</div>
        </div>
        <div class="td">
          <div>所属省份：</div>
          <div>${options.properties.data.sf||'-'}</div>
        </div>
        <div class="td">
          <div>所属区县：</div>
          <div>${options.properties.data.qx||'-'}</div>
        </div>
        <div class="td">
          <div>所属管制部：</div>
          <div>${options.properties.data.gz||'-'}</div>
        </div>
      </div>

    </div>
    <div class="td footerTr">
      <div>备注：</div>
      <div>${options.properties.data.note}</div>
    </div>
    <div class="footer">
      <button class="operateBtn" data-urlList="${options.properties.data.urlList}" data-accessToken="${options.properties.data.accessToken}">视频监控</button>
      <button class="operateBtn">安全射界</button>
    </div>
  </div>
        `;
        this.overlay.setPosition(position);
    }

    public closeOverlay() {
        this.overlay.getElement()!.innerHTML = "";
    }
    /** 销毁事件 */
    public destroyEvent() {
        this.map.un("singleclick", this.handleMarkerClick);
    }
}
